<template>
  <!-- 新建文件夹对话框 -->
  <el-dialog
    :width="device === 'mobile' ? '90%' : '80%'"
    :visible.sync="visible"
    @close="onClose"
    class="weekly-report-statisc-dialog"
  >
    <div slot="title" class="slot-title">
        请休假情况（{{currentYear}}）
        <span @click="handleChangeYear('last')">上一年</span>
        <span @click="handleChangeYear('now')">今年</span>
    </div>    
    <history-record-table ref="historyTable" :currentYear="currentYear"/>
  </el-dialog>
</template>
<script>
import { mapGetters } from "vuex";
import moment from 'moment'
export default {
  name: "WeeklyReportStatiscModal",
  props: {
    onClose: {
      type: Function
    },
    dialogVisible: {
      type: Boolean,
      default: false
    },
  },
  components: {
      HistoryRecordTable:() => import('./HistoryRecordTable.vue')
    // ReportUserInfoTable: () => import("./ReportUserInfoTable.vue")
  },
  computed: {
    ...mapGetters(["device"])
  },
  watch: {
    dialogVisible(value) {
      this.visible = value;
    },
    reportData(value){
        console.log('value',value)
    }
  },
  data() {
    return {
      visible: false,
      date: "",
      option: "toPdf",
      activeName: 'first',
      currentYear: null,
    };
  },
  mounted(){
      this.currentYear = parseInt(moment(new Date()).format('YYYY'))
  },
  methods:{
      handleChangeYear(param){
          if(param == 'last'){
              this.$refs.historyTable.fetchData({page:1,year:this.currentYear - 1})
              this.currentYear = this.currentYear - 1
          }else{
              this.$refs.historyTable.fetchData({page:1,year:parseInt(moment(new Date()).format('YYYY'))})
              this.currentYear = parseInt(moment(new Date()).format('YYYY'))
          }
      }
  }
};
</script>
<style lang="scss">
.weekly-report-statisc-dialog {
  .el-dialog__body {
    padding-top: 0;
  }
  .slot-title{
      font-size: 22px;
      span{
          font-size: 16px;
          margin-left: 15px;
          cursor: pointer;
      }
      span:hover{
          color: #409EFF;
      }
  }
}
</style>